<template>
	<view>
		<u-icon name="more-dot-fill" color="#000000" size="44" @click="ShowHidden = !ShowHidden"></u-icon>
		<view class="arrivalNavigation" v-if="ShowHidden">
			<view class="sideNavigation">
				<view class="item u-border-bottom" v-for="(item, index) in list" :key="index">
					<image :src="item.image" style="width: 32rpx;height: 32rpx;vertical-align: middle;" mode=""></image>
					<text style="vertical-align: middle;margin-left: 20rpx;font-size: 28rpx;color:#000000;">{{ item.label }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				ShowHidden: false
			};
		}
	}
</script>

<style lang="scss" scoped>
	 //从这里开始是弹出框的样式  不需要搜索框的 前面样式都不用加
	 .arrivalNavigation{
			width: 250rpx;
			position: absolute;
			right:20rpx;
			z-index: 99;
			.sideNavigation{
				width: 230rpx;
				background-color: #FFFFFF;
				box-shadow: 0px 0px 18px 2px rgba(8, 1, 3, 0.1);
				// color: #eee;
				// border-radius: 10rpx;
				.item{
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
				}
				.liBottomBorder{
					height: 1rpx;
					background-color: #000000;
					opacity: 0.2;
				}
			}
	 	}
</style>
